<script src="<?php  echo Yii::app()->params['static_url']; ?>js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="<?php  echo Yii::app()->params['static_url']; ?>js/highcharts.js" type="text/javascript"></script>
<script src="<?php  echo Yii::app()->params['static_url']; ?>js/exporting.js" type="text/javascript"></script>
<?php 
    if($chart_type==1){
        $data_one = '';
        $data_two = '';
        $data_three = '';
        $categories='';
        if(isset($month)&& $month==date('m') && isset($year) && $year=date('Y')){
            for($i=1;$i<=intval(date('d'));$i++){
                $categories.= ", "."'".$i."'";
                $data_one .= ", " . $money_sms_day[$i];
                $data_two .= ", " . $money_card_day[$i];
                $data_three .= ", " . $money_charging_day[$i];
            }   
        } else{
            $count = cal_days_in_month(CAL_GREGORIAN, $month, $year);
            for($i=1;$i<=$count;$i++){
                $categories.= ", "."'".$i."'";
                $data_one .= ", " . $money_sms_day[$i];
                $data_two .= ", " . $money_card_day[$i];
                $data_three .= ", " . $money_charging_day[$i];
            }   
        }
        $data_one = ltrim($data_one, ", ");        
        $data_two = ltrim($data_two, ", ");        
        $data_three = ltrim($data_three, ", ");        
        $categories = ltrim($categories, ", ");
    ?>
    <script type="">
        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chart',
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Biểu đồ doanh thu ',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        categories: [<?php echo $categories; ?>]
                    },
                    yAxis: {
                        title: {
                            text: 'Biểu đồ doanh thu'
                        },
                        min:0,
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            'Ngày '+this.x +': '+ Highcharts.numberFormat(this.y, 0) +'đ';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'SMS',
                        data: [<?php echo $data_one;?>]
                    }, {
                        name: 'Card',
                        data: [<?php echo $data_two;?>]
                    }, {
                        name: 'WapCharging',
                        data: [<?php echo $data_three;?>]
                    }]
                });
            });

        });
        Highcharts.theme = {
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            chart: {
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                    ]
                },
                borderWidth: 2,
                plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                plotShadow: true,
                plotBorderWidth: 1
            },
            title: {
                style: {
                    color: '#000',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                style: {
                    color: '#666666',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            xAxis: {
                gridLineWidth: 1,
                lineColor: '#000',
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                    }
                }
            },
            yAxis: {
                // minorTickInterval: 'auto',
                lineColor: '#000',
                lineWidth: 1,
                tickWidth: 1,
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: 'black'

                },
                itemHoverStyle: {
                    color: '#039'
                },
                itemHiddenStyle: {
                    color: 'gray'
                }
            },
            labels: {
                style: {
                    color: '#99b'
                }
            }
        };

        // Apply the theme
        var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

    </script>
    <?php } else {
        $data_one = '';
        $data_two = '';
        $data_three = '';
        $categories='';
        if(isset($year) && $year==date('Y')){
            for($i=1;$i<=(date('m'));$i++){
                $categories.= ", "."'".$i."'";
                $data_one .= ", " . $money_sms_month[$i];
                $data_two .= ", " . $money_card_month[$i];
                $data_three .= ", " . $money_charging_month[$i];
            }   
        } else{
            for($i=1;$i<=12;$i++){
                $categories.= ", "."'".$i."'";
                $data_one .= ", " . $money_sms_month[$i];
                $data_two .= ", " . $money_card_month[$i];
                $data_three .= ", " . $money_charging_month[$i];
            }   
        }

        $data_one = ltrim($data_one, ", ");        
        $data_two = ltrim($data_two, ", ");        
        $data_three = ltrim($data_three, ", ");        
        $categories = ltrim($categories, ", ");
    ?>
    <script type="">
        $(function () {
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chart',
                        type: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Biểu đồ doanh thu ',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        categories: [<?php echo $categories; ?>]
                    },
                    yAxis: {
                        title: {
                            text: 'Biểu đồ doanh thu'
                        },
                        min:0,
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            'Ngày '+this.x +': '+ Highcharts.numberFormat(this.y, 0) +'đ';
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [{
                        name: 'SMS',
                        data: [<?php echo $data_one;?>]
                    }, {
                        name: 'Card',
                        data: [<?php echo $data_two;?>]
                    }, {
                        name: 'WapCharging',
                        data: [<?php echo $data_three;?>]
                    }]
                });
            });

        });
        Highcharts.theme = {
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            chart: {
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                    ]
                },
                borderWidth: 2,
                plotBackgroundColor: 'rgba(255, 255, 255, .9)',
                plotShadow: true,
                plotBorderWidth: 1
            },
            title: {
                style: {
                    color: '#000',
                    font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            subtitle: {
                style: {
                    color: '#666666',
                    font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
                }
            },
            xAxis: {
                gridLineWidth: 1,
                lineColor: '#000',
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'

                    }
                }
            },
            yAxis: {
                // minorTickInterval: 'auto',
                lineColor: '#000',
                lineWidth: 1,
                tickWidth: 1,
                tickColor: '#000',
                labels: {
                    style: {
                        color: '#000',
                        font: '11px Trebuchet MS, Verdana, sans-serif'
                    }
                },
                title: {
                    style: {
                        color: '#333',
                        fontWeight: 'bold',
                        fontSize: '12px',
                        fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                    }
                }
            },
            legend: {
                itemStyle: {
                    font: '9pt Trebuchet MS, Verdana, sans-serif',
                    color: 'black'

                },
                itemHoverStyle: {
                    color: '#039'
                },
                itemHiddenStyle: {
                    color: 'gray'
                }
            },
            labels: {
                style: {
                    color: '#99b'
                }
            }
        };

        // Apply the theme
        var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

    </script>
    <?php }?>
<div class="main clearfix">
    <div class="Tabs clearfix">
        <ul class="clearfix">
            <li><a class="active" href="<?php echo Url::createUrl("paymentTotal/index")?>"><span>Tổng</span></a></li>
            <li><a href="<?php echo Url::createUrl("paymentSmsWapmaster/index")?>"><span>SMS</span></a></li>
            <li><a href="<?php echo Url::createUrl("paymentCardWapmaster/index")?>"><span>CARD</span></a></li>
            <li><a href="<?php echo Url::createUrl("paymentChargingWapmaster/index")?>"><span>CHARGING</span></a></li>
        </ul>                
    </div>

    <div class="box clearfix"> 
        <form action="" method="get" name="form1">
            <ul class="form4 bottom20">
                <li class="clearfix"><label><strong>Biểu đồ </strong>:</label>
                    <div class="filltext">
                        <input onclick="show();" id="chart_type" name="chart_type" type="radio" value="1" <?php if(isset($chart_type) && $chart_type==1){ echo 'checked="checked"';}else{ echo '';} ?>> Theo tháng
                        <input onclick="hide();" id="chart_type" name="chart_type" type="radio" style="margin-left:10px;" value="2" <?php if(isset($chart_type) && $chart_type==2){ echo 'checked="checked"';}else{ echo '';} ?>> Theo Năm
                    </div>
                </li>
                <li class="clearfix"><label><strong>Thời gian </strong>:</label>
                    <div class="filltext">
                        <select id="month" name="month">
                            <?php for($i=1;$i<13;$i++){ ?>
                                <option <?php if(isset($month) && $month==$i){ echo "selected='selected'";} ?> value="<?php echo $i ?>"><?php echo "Tháng ".$i; ?></option>
                                <?php } ?>
                        </select>
                        <select name="year">
                            <?php for($i=date('Y');$i>=2011;$i--){ ?>
                                <option <?php if(isset($year) && $year==$i){ echo "selected='selected'";} ?> value="<?php echo $i ?>"><?php echo "Năm ".$i; ?></option>
                                <?php } ?>
                        </select>
                    </div>
                </li>


                <li class="clearfix"><label>&nbsp;</label>
                    <div class="filltext">
                        <input type="submit" class="btn-bigblue" value=" Xem "> 
                    </div>
                </li>

            </ul>
        </form>
        <hr>
        <div class="clearfix">
            <div class="col-900" style="margin-right: 35px;" >
                <p><strong>Biểu đồ doanh thu</strong></p>
                <p>
                    <div id="chart" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
                </p>
            </div>
            <div class="col-250 fr" style="margin-top: 26px;">
                <ul class="form5">
                    <li class="clearfix"><label><strong>Doanh thu SMS </strong>:</label>
                        <div class="filltext">
                            <strong> <?php if(isset($total_sms)){ echo Common::format_price($total_sms); } ?></strong>
                        </div>
                    </li>
                    <li class="clearfix"><label><strong>Doanh thu Card</strong>:</label>
                        <div class="filltext"><strong><?php if(isset($total_card)){ echo Common::format_price($total_card); } ?></strong></div>
                    </li>
                    <li class="clearfix"><label><strong>Doanh thu Wapcharging</strong>:</label>
                        <div class="filltext"><strong><?php if(isset($total_charging)){ echo Common::format_price($total_charging); } ?></strong></div>
                    </li>
                    <li class="clearfix"><label><strong class="cl666">Tổng doanh thu </strong>:</label>
                        <div class="filltext"><strong class="clred"> <?php if(isset($total_sms)){ echo Common::format_price($total_sms+$total_card+$total_charging); } ?></strong></div>
                    </li>

                </ul>
            </div>
        </div>  
    </div>
</div>
<script type="">
    $(document).ready(function(){
        var e=$("input[name='chart_type']:checked").val()
        if(e==2){ 
            $("#month").hide("slow");
        } 
    });
    function hide(){
        $("#month").hide("slow");
    }
    function show(){
        $("#month").show("slow");
    }


</script>